<template>
  <div v-if="showMenu.list.length" class="sys_select">
    <div ref="dropDown" class="gl_clear gl_pointer" @mousemove="menuMouseenter" @mouseout="menuMouseout">
      <div class="gl_fl gl_pt_10 gl_mr_5">
        <div class="icon_wrap" :class="'bg_icon_color_' + showMenu.current.code">
          <i class="iconfont" :class="showMenu.current.icon" :style="{fontSize: showMenu.current.iconSize}" />
          <div class="round_border" />
        </div>
      </div>
      <div class="gl_fl sys_text" :class="'color_' + showMenu.current.code">{{ showMenu.current.name }}</div>
    </div>
    <div class="sys_select_list" :style="rectStyle" @mousemove="listMouseenter" @mouseout="listMouseout">
      <div class="sys_select_item_wrap">
        <template v-for="(item, index) in showMenu.list">
          <div
            :key="index"
            class="sys_select_item"
            :class="'bg_color_' + item.code"
            @click="clickMentItem(item)"
          >
            <div class="gl_fl gl_pt_10 gl_mr_5">
              <div class="icon_wrap" :class="'bg_icon_color_' + item.code">
                <i class="iconfont" :class="item.icon" :style="{fontSize: item.iconSize}" />
                <div class="round_border" />
              </div>
            </div>
            <div class="gl_fl sys_text" :class="'color_' + item.code">{{ item.name }}</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    activeMenu: {
      type: String,
      default: 'backstage'
    },
    ignoreList: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      rect: {},
      isBlock: false,
      list: [
        {
          name: '后台管理',
          code: 'backstage',
          icon: 'icon_houtaiguanli',
          iconSize: '18px'
        },
        {
          name: '道馆管理',
          code: 'club',
          icon: 'icon_daoguanguanli',
          iconSize: '18px'
        },
        {
          name: '内容管理',
          code: 'cms',
          icon: 'icon_neirongguanli',
          iconSize: '18px'
        }
      ]
    };
  },
  computed: {
    rectStyle () {
      const _left = this.rect.left || 0;
      return {
        'left': _left - 40 + 'px',
        'display': this.isBlock ? 'block' : 'none'
      };
    },
    showMenu () {
      const _result = {
        current: {},
        list: []
      };

      _result.list = this.list.filter(item => {
        // 如果该项在忽略列表中，则直接忽略
        if (item.code in this.ignoreList) {
          return false;
        }
        // 如果该项时选中项，则该项存在current中，非选中项存放在list中
        if (item.code === this.activeMenu) {
          _result.current = item;
          return false;
        } else {
          return true;
        }
      });

      return _result;
    }
  },
  methods: {
    menuMouseenter () {
      const _el = this.$refs.dropDown;
      this.rect = _el.getBoundingClientRect();
      this.isBlock = true;
    },
    menuMouseout () {
      this.isBlock = false;
    },
    listMouseenter () {
      this.isBlock = true;
    },
    listMouseout () {
      this.isBlock = false;
    },
    clickMentItem (data) {
      this.$emit('onclickMenu', data.code);
    }
  }
};
</script>

<style lang="scss" scoped>
  .sys_select {
    position: relative;
  }
  .sys_select_list {
    display: none;
    position: fixed;
    left: 0;
    top: 54px;
    width: 171px;
    padding-top: 15px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px 4px rgba(0,0,0,0.10);
    z-index: 1002;
  }
  .sys_select_list::before {
    position: absolute;
    display: block;
    width: 100%;
    height: 6px;
    top: -6px;
    left: 0;
    content: "";
    background-color: transparent;
  }
  .sys_select_item_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .sys_select_item {
    box-sizing: border-box;
    width: 120px;
    padding: 0 10px;
    height: 50px;
    margin-bottom: 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
  }
  .icon_wrap {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    line-height: 30px;
    text-align: center;
    position: relative;
  }
  .round_border {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
  }
  .sys_text {
    font-size: 14px;
  }
  .icon_houtaiguanli {
    font-size: 18px;
  }
  .bg_icon_color_club {
    background-color: #BEAAFF;
  }
  .bg_icon_color_backstage {
    background-color: #304156;
  }
  .bg_icon_color_cms {
    background-color: #F3A35E;
  }
  .bg_color_club {
    background-color: #F9F8FF;
  }
  .bg_color_club:hover {
    transform: scale(1.06);
    box-shadow: 0px 2px 4px 2px rgba(152,126,237,0.15);
  }
  .bg_color_backstage {
    background-color: #EFF6FF;
  }
  .bg_color_backstage:hover {
    transform: scale(1.06);
    box-shadow: 0px 2px 4px 2px rgba(48,65,86,0.15);
  }
  .bg_color_cms {
    background-color: #FFF9F4;
  }
  .bg_color_cms:hover {
    transform: scale(1.06);
    box-shadow: 0px 2px 4px 2px rgba(243,163,94,0.15);
  }
  .color_club {
    color: #987EED;
  }
  .color_backstage {
    color: #304156;
  }
  .color_cms {
    color: #F3A35E;
  }
</style>
